import { Button } from '@shared/ui/Button'
import { Tag as TagComponent } from '@shared/ui/Tag'
import { useState } from 'react'
import { Tag } from '../../model/types/Tag'
import styles from './TagElement.module.scss'

interface TagElementProps {
  onAdd?: (tagId: string) => void
  onClick?: (tagId: string) => void
  tag: Tag
}

export const TagElement = ({ onAdd, onClick, tag }: TagElementProps) => {
  const [showButton, setShowButton] = useState(false)

  const onMouseEvent = (show: boolean) => {
    onClick && setShowButton(show)
  }

  return (
    <div
      className={styles['tag-wrapper']}
      onMouseEnter={() => onMouseEvent(true)}
      onMouseLeave={() => onMouseEvent(false)}
    >
      <TagComponent color={tag.color} onClick={() => onAdd?.(tag?.id)}>
        {tag.text}
      </TagComponent>
      {showButton && onClick && (
        <Button
          circle
          className={styles['delete-btn']}
          color='error'
          iconName='close'
          onClick={() => onClick(tag.id)}
          size='small'
        />
      )}
    </div>
  )
}
